.container {
    width: var(--width-);
    height: 100%;
    padding: 0 0.3rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0.6rem;
    row-gap: 0.6rem;
    margin: 0 auto;

    > .item {
        width: calc(var(--item-width));
        height: 8.65rem;
        display: flex;
        flex-direction: column;
        font-size: 14px;

        > .img__list {
            width: 100%;
            height: 80%;
            display: flex;
            flex-direction: column;

            > .img__item {
                width: 100%;
                height: 80%;
                display: flex;
                flex-direction: row;
                column-gap: 2px;
                border-radius: 4px;
                overflow-y: hidden;
                cursor: pointer;
                position: relative;
                margin-bottom: 16px;

                &:hover {
                    > .mask {
                        opacity: 1;
                    }
                }

                > .mask {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    background-color: #ffffff40;
                    opacity: 0;
                    transition: all 0.2s ease;
                }

                > .img__left {
                    width: 70%;
                    height: 100%;
                    overflow: hidden;

                    > img {
                        height: 100%;
                    }
                }

                > .img__right {
                    width: 30%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    row-gap: 2px;

                    > img {
                        height: 50%;
                    }
                }
            }

            > .collection__title {
                color: #111111;
                font-size: 18px;
                font-weight: bold;
                cursor: pointer;

                &:hover {
                    .mask {
                        opacity: 1;
                    }
                }
            }
        }

        > .collections__name {
            margin-bottom: 13px;
        }

        > .tag__list {
            display: flex;
            flex-direction: row;
            column-gap: 8px;

            > .item {
                padding: 2px 8px;
                background-color: #eeeeee;
            }
        }
    }
}
